/*
  video-grid.js
  Handles the dynamic creation and replacement of videos in the #random-video-grid container.
*/
document.addEventListener("DOMContentLoaded", function() {
    
  // --- Configuration ---
  const TOTAL_VIDEOS_IN_FOLDER = 21; // Total number of mp4 files (1.mp4 ... 21.mp4)
  const TOTAL_SLOTS_TO_CREATE = 14;  // Max videos to create (for 2x7 desktop grid)
  const VIDEO_PATH_PREFIX = "Namesake Neural Cellular Automata_files/assets/mp4/topvideos/"; // Corrected path
  // ---------------------

  const gridContainer = document.getElementById("random-video-grid");

  if (!gridContainer) {
    console.error("Video grid container '#random-video-grid' not found.");
    return;
  }

  /**
   * Gets a random video source URL from 1.mp4 to 21.mp4
   * This is used for REPLACEMENTS after a video ends.
   */
  function getRandomVideoSrc() {
    const videoId = Math.floor(Math.random() * TOTAL_VIDEOS_IN_FOLDER) + 1;
    return `${VIDEO_PATH_PREFIX}${videoId}.mp4`;
  }

  /**
   * Gets a random rotation in 90-degree increments.
   */
  function getRandomRotation() {
    const rotations = [0, 90, 180, 270];
    const randomIndex = Math.floor(Math.random() * rotations.length);
    return rotations[randomIndex];
  }
  
  /**
   * Helper function to shuffle an array in place (Fisher-Yates shuffle).
   * This is used for the initial load to ensure no duplicates.
   */
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }

  /**
   * Called when any video finishes playing.
   * It sets a new *random* source and a new *random* rotation.
   */
  async function onVideoEnded(event) {
    const video = event.target;
    video.src = getRandomVideoSrc();
    video.style.transform = `rotate(${getRandomRotation()}deg)`;
    try {
      // Must call .play() again after changing source
      await video.play();
    } catch (err) {
      console.error("Failed to play replacement video:", err);
    }
  }

  /**
   * Creates a single video element with all the correct properties
   * (but without a source).
   */
  function createVideoElement() {
    const video = document.createElement("video");
    
    video.autoplay = true;
    video.muted = true;
    video.playsInline = true; // Essential for mobile browsers
    
    // Add the listener that triggers when the video finishes
    video.addEventListener('ended', onVideoEnded);
    
    return video;
  }

  // --- Main execution ---
  
  // 1. Create a list of all unique video IDs (e.g., [1, 2, ..., 21])
  let initialVideoIds = Array.from({length: TOTAL_VIDEOS_IN_FOLDER}, (_, i) => i + 1);
  
  // 2. Shuffle that list to randomize the initial grid layout
  shuffleArray(initialVideoIds);
  
  // 3. Loop 14 times (TOTAL_SLOTS_TO_CREATE) to create and add each video
  for (let i = 0; i < TOTAL_SLOTS_TO_CREATE; i++) {
    const video = createVideoElement();
    
    // 4. Assign a unique, shuffled video ID from the list.
    // We use [i] because the list is already shuffled.
    const videoId = initialVideoIds[i];
    video.src = `${VIDEO_PATH_PREFIX}${videoId}.mp4`;
    
    // 5. Assign an initial random rotation
    video.style.transform = `rotate(${getRandomRotation()}deg)`;

    gridContainer.appendChild(video);
    
    // 6. Explicitly call .play() and catch any potential errors
    video.play().catch(err => {
      console.warn(`Initial autoplay for video ${videoId}.mp4 was prevented:`, err.message);
    });
  }
});